<template>
  <div class="container">
    <header>
      <!--<h1>社会组织监管驾驶舱</h1>-->
    </header>
    <main>
      <div class="layout-l">
        <Node1 />
        <Node2 />
        <Node3 />
        <Node4 />
      </div>
      <div class="layout-c">
        <Node5 />
        <Node6 />
      </div>
      <div class="layout-r">
        <Node7 />
        <Node8 />
        <Node9 />
        <Node10 />
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup>
import Node1 from './page/node1/node1.vue'
import Node2 from './page/node2/node2.vue'
import Node3 from './page/node3/node3.vue'
import Node4 from './page/node4/node4.vue'
import Node5 from './page/node5/node5.vue'
import Node6 from './page/node6/node6.vue'
import Node7 from './page/node7/node7.vue'
import Node8 from './page/node8/node8.vue'
import Node9 from './page/node9/node9.vue'
import Node10 from './page/node10/node10.vue'
import { useHtmlFontSizeHook } from './composables/useHtmlFontSizeHook'
useHtmlFontSizeHook()
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
  header {
    height: 1.05rem;
    background: url(@/assets/imgs/largeScreen/b2.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    h1 {
      color: #fff;
      text-align: center;
      font-size: 0.42rem;
      line-height: 0.9rem;
      margin: 0;
    }
  }
  main {
    width: 100%;
    box-sizing: border-box;
    padding:0 20px 20px 20px;
    height: calc(100vh - 1.05rem);
    display: flex;
    .layout-l {
      width: 30%;
    }
    .layout-c {
      width: calc(40% - 40px);
      margin: 0 20px;
    }
    .layout-r {
      width: 30%;
    }
  }
}
</style>
